$(function () {
  /* 
  1 组件的初始化
    1 图片上传框 即时显示  （两个标签 图片标签 另外一个 文件上传标签）
    2 动态渲染下拉列表-文章类别
    3 初始化 layui的日期选择框
    4 初始化  tinymce富文本编辑器 

  2 发布按钮 
    1 绑定点击事件 
    2 获取到对应的数据  表单的数据
    3 拼接参数 发送给后台 完成新增 
    4 重新跳转到文章列表页面
  
   */


  // 1.1 给文件上传框绑定 值改变事件 onchange
  $("#inputCover").on("change", function () {
    // 1.1.1 获取到上传到浏览器内存中的文件
    const file = this.files[0];
    // 1.1.2 使用 一个 URL对象 将内存中的图片 生成对应的地址 
    const src = URL.createObjectURL(file);
    // 1.1.3 让图片标签显示内存中的图片即可
    $("#coverimg").prop("src", src);
  });

  // 1.2 动态渲染 文章列表下拉列表
  function getArticleCatetory() {
    $.ajax({
      url: "http://localhost:8080/api/v1/admin/category/list",
      headers: {
        Authorization: localStorage.getItem("token")
      },
      success(res) {
        if (res.code === 200) {
          const html = res.data.reduce((html, value) => html += `<option value='${value.id}'>${value.name}</option>`, '<option value="">所有分类</option>');
          $("#category").html(html);
        } else {
          console.log("失败");
          console.log(res);
        }
      }
    })
  }

  // 1.2 动态渲染 文章列表下拉列表
  getArticleCatetory();


  // 1.3 初始化 layui的日期选择框
  function renderLayuiDate() {
    const laydate = layui.laydate;
    //执行一个laydate实例
    laydate.render({
      elem: '#articleDate' //指定元素
    });

  }

  // 1.3 初始化 layui的日期选择框
  renderLayuiDate();


  // 1.4 初始化  tinymce富文本编辑器 
  function renderRichText() {
    tinymce.init({
      selector: '#articleContent',
      language: 'zh_CN',//注意大小写
    });
  }

  // 1.4 初始化  tinymce富文本编辑器 
  renderRichText();

  // 2.1 绑定点击事件 发布
  $(".btn-edit").on("click", function () {
    article("已发布");
  });

  // 3.1 存为草稿
  $(".btn-draft").on("click",function () {
    article("");
  })

  // 发布或者草稿
  function article(state) {
        // 2.2 获取表单中的值  formdata  （确认接口文档中字段 和 我们表单的name属性相对应）
    // 使用formdata来快速获取表单的值  title cover categoryId date
    // 剩下两个 content state 需要我们手动去拼接处理  append
    const formdata = new FormData($("#form")[0]);
    // 拼接 content 
    formdata.append("content", tinyMCE.editors["articleContent"].getContent());
    // 拼接 发布状态
    formdata.append("state", state);

    // 2.3 开始发送 请求 新增  
    $.ajax({
      url: "http://localhost:8080/api/v1/admin/article/publish",
      type: "post",
      data: formdata,
      // 两个额外配置 
      contentType: false,
      processData: false,
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      success(res) {
        if (res.code === 200) {
          console.log("恭喜新增成功");
          // 2.4 跳转到文章列表页面
          location.href = "article_list.html";
        } else {
          console.log("失败");
          console.log(res);
        }
      }
    })
    
  }

})